<script setup lang="ts">
import microAppJs from "@micro-zoe/micro-app";
import {
  ElButton,
  ElCard,
  ElMessage,
  ElNotification,
  ElSpace,
  ElTable,
} from 'element-plus';
import { useRouter } from 'vue-router';
import {
  preferences,
  updatePreferences,
  usePreferences,
} from '@vben/preferences';
const route = useRouter();
const router = useRouter();
const onBack = () => {
  router.back();
};
const onJumpNotes = () => {
  updatePreferences({
    sidebar: {
      hidden: !preferences.sidebar.hidden,
    },
  });
};
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "MicroAppFinance"
});
var data={aa:1}
function created(){
  console.log("子应用创建成功");
}
function mounted() {
  console.log("子应用挂载成功");
}
function beforemount() {
  console.log("子应用挂载前");
}
function unmount() {
  console.log("子应用卸载成功");
}
function error() {
  console.log("子应用加载失败");
}
// 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange
function handleDataChange(e: any) {
  console.log("子应用数据变化", e.detail.dat);
}
</script>

<template>
 
   <div  id="micro-app-container">
    <el-button @click="onBack">返回</el-button>
    <el-button @click="onJumpNotes">二维码</el-button><br /><br />
  <h1>加油</h1>
     这是子app11
     <micro-app name='finance' 
     style="height: 400px;" 
     :data='data'
      url='http://localhost:5173/' 
      router-mode='native'
       iframe 
       disableScopecss
       destroy
       inline
       
     @created='created'
    @beforemount='beforemount'
    @mounted='mounted'
    @unmount='unmount'
    @error='error'
    @datachange='handleDataChange'
     ></micro-app>
      
    </div>
</template>
